<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备分组</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="groupSearchForm" class="search-form">
      <el-form-item label="组名">
        <el-input
          size="small"
          v-model="groupSearchForm.name"
          placeholder="输入组名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="searchGroup"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button size="small" icon="el-icon-plus" @click="addGroup"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-row>
      <el-col :span="9">
        <el-table
          size="small"
          :data="groups"
          highlight-current-row
          v-loading="$store.state.loading"
          border
          element-loading-text="拼命加载中"
          style="width: 100%"
          @current-change="onGroupSelect"
        >
          <el-table-column
            sortable
            prop="id"
            label="组ID"
            width="80"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="name"
            label="组名"
            width="200"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
              <el-tag size="mini" class="mg-left-10">{{
                scope.row.deviceQty
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="left" label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button
                slot="reference"
                size="mini"
                plain
                @click="modifyGroup(scope.row)"
                >修改</el-button
              >
              <el-popconfirm
                title="确认要删除吗？"
                @confirm="deleteGroup(scope.row)"
                class="mg-left-10"
              >
                <el-button slot="reference" size="mini" plain type="danger"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :data="groupSearchForm"
          @onPagePaging="searchGroup"
        ></Pagination>
      </el-col>
      <el-col :span="15" style="padding-left: 10px">
        <el-table
          v-if="listData.length > 0"
          size="small"
          :data="listData"
          highlight-current-row
          v-loading="$store.state.loading"
          border
          element-loading-text="拼命加载中"
          style="width: 100%"
        >
          <el-table-column align="center" type="index" width="60">
          </el-table-column>
          <el-table-column
            sortable
            prop="deviceId"
            label="设备ID"
            width="250"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            sortable
            prop="productKey"
            label="产品"
            width="120"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column align="left" label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="infor"
                @click="goDeviceDetail(scope.$index, scope.row)"
                >详情</el-button
              >
              <el-button
                slot="reference"
                size="mini"
                plain
                type="danger"
                class="mg-left-10"
                @click="removeFromGroup(scope.row)"
                >退组</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-empty v-else>
          <el-button type="primary" size="mini" @click="goDeviceList"
            >去设备列表绑定分组</el-button
          >
        </el-empty>

        <Pagination
          :data="deviceSearchFrom"
          @onPagePaging="search"
        ></Pagination>
      </el-col>
    </el-row>
    <el-dialog
      :title="isModifyGroup ? '修改分组' : '添加分组'"
      :visible.sync="showAddGroup"
      width="400px"
    >
      <el-form ref="form" :model="addForm" :rules="rules" label-width="80px">
        <el-form-item label="分组ID" prop="id">
          <el-input
            size="small"
            v-model="addForm.id"
            placeholder="请输入分组ID"
            :readonly="isModifyGroup ? true : false"
          ></el-input>
        </el-form-item>
        <el-form-item label="分组名" prop="name">
          <el-input
            size="small"
            v-model="addForm.name"
            placeholder="请输入分组名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="addForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAddGroup" size="small"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  DeviceList,
  DeviceGroupList,
  GroupAdd,
  GroupDeviceRemove,
  GroupSave,
  GroupDelete,
} from "../../api/deviceApi";
import { ProductList } from "../../api/productApi";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false, //是显示加载
      showAddGroup: false,
      isModifyGroup: false,
      groupSearchForm: {
        page: 1,
        size: 10,
        total: 0,
        name: "",
      },
      deviceSearchFrom: {
        page: 1,
        size: 10,
        total: 0,
        group: "",
      },
      addForm: {
        id: "",
        name: "",
        remark: "",
      },
      rules: {
        id: [{ required: true, message: "请填写组ID", trigger: "blur" }],
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
      },
      groups: [],
      listData: [],
      productMap: {},
    };
  },
  components: {
    Pagination,
  },
  created() {
    this.searchGroup(this.groupSearchForm);
  },
  methods: {
    getGroupDevices(parameter) {
      ProductList({ page: 1, size: 1000 }).then((res) => {
        this.products = res.data;
        let nodeTypeMap = {};
        res.data.forEach((p) => {
          this.productMap[p.id] = p.name;
          nodeTypeMap[p.id] = p.nodeType;
        });

        DeviceList(parameter).then((res) => {
          res.data.forEach((d) => {
            d.productKey = this.productMap[d.productKey];
          });

          this.listData = res.data;
          this.deviceSearchFrom.total = res.total;
        });
      });
    },
    search() {
      this.getGroupDevices(this.deviceSearchFrom);
    },
    searchGroup() {
      DeviceGroupList(this.groupSearchForm).then((res) => {
        this.groups = res.data;
        this.groupSearchForm.total = res.total;
      });
    },
    addGroup() {
      this.showAddGroup = true;
      this.addForm.id = "";
      this.isModifyGroup = false;
    },
    submitAddGroup() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!this.isModifyGroup) {
            GroupAdd(this.addForm).then(() => {
              this.$notify({
                title: "成功",
                message: "添加成功",
                type: "success",
              });
              this.showAddGroup = false;
              this.searchGroup();
            });
          } else {
            GroupSave(this.addForm).then(() => {
              this.$notify({
                title: "成功",
                message: "修改成功",
                type: "success",
              });
              this.showAddGroup = false;
              this.searchGroup();
            });
          }
        }
      });
    },
    modifyGroup(row) {
      this.addForm = row;
      this.showAddGroup = true;
      this.isModifyGroup = true;
    },
    onGroupSelect(row) {
      if (!row) {
        return;
      }
      this.deviceSearchFrom.group = row.id;
      this.getGroupDevices(this.deviceSearchFrom);
    },
    goDeviceDetail(index, row) {
      this.$router.push({
        path: "/device/DeviceDetail",
        query: {
          deviceId: row.deviceId,
        },
      });
    },
    goDeviceList() {
      this.$router.push({
        path: "/device/devices",
      });
    },
    removeFromGroup(row) {
      GroupDeviceRemove(this.deviceSearchFrom.group, [row.deviceId]).then(
        () => {
          this.$notify({
            title: "成功",
            message: "退组成功",
            type: "success",
          });
          this.search();
        }
      );
    },
    deleteGroup(row) {
      this.loading = true;
      GroupDelete(row.id).then(() => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
        });
        this.searchGroup();
      });
    },
  },
};
</script>
